<template>
  <view w-full box-border pa-20rpx>
    <view
      v-if="[1,2,3,4].includes(result.refundStatus)"
      bg="#fff"
      rounded-20rpx
      w-full
      flex
      flex-col
      justify-center
      items-center
      box-border
      px-20rpx
      py-40rpx
      mb-20rpx>
      <!-- 退款中 -->
      <view v-if="result.refundStatus == 1 || result.refundStatus == 2" flex items-center my-20rpx>
        <image w-40rpx h-40rpx mr-20rpx src="@/pages/ticket/static/time.png"></image>
        <view text-36rpx font-bold text="#000">{{ refundStatus[result.refundStatus] }}</view>
      </view>

      <!-- 已退款 -->
      <view v-if="result.refundStatus == 4" flex items-center my-20rpx>
        <image w-40rpx h-40rpx mr-20rpx src="@/pages/ticket/static/check.png"></image>
        <view text-36rpx font-bold text="#000">{{ refundStatus[result.refundStatus] }}</view>
      </view>

      <!-- 已取消, 拒绝退款 -->
      <view v-if="result.refundStatus === 3" flex items-center my-20rpx>
        <image w-40rpx h-40rpx mr-20rpx src="@/pages/ticket/static/cancel.png"></image>
        <view text-36rpx font-bold text="#000">{{ refundStatus[result.refundStatus] }}</view>
      </view>
    </view>
    <view
      v-else
      bg="#fff"
      rounded-20rpx
      w-full
      flex
      flex-col
      justify-center
      items-center
      box-border
      px-20rpx
      py-40rpx
      mb-20rpx>
      <!-- 待支付,待交付 -->
      <view v-if="result.orderStatus === 0 || result.orderStatus === 1 || result.orderStatus === 6" flex items-center my-20rpx>
        <image w-40rpx h-40rpx mr-20rpx src="@/pages/ticket/static/time.png"></image>
        <view text-36rpx font-bold text="#000">{{ orderStatus[result.orderStatus] }}</view>
      </view>

      <!-- 已交付 -->
      <view v-if="result.orderStatus === 2" flex items-center my-20rpx>
        <image w-40rpx h-40rpx mr-20rpx src="@/pages/ticket/static/check.png"></image>
        <view text-36rpx font-bold text="#000">{{ orderStatus[result.orderStatus] }}</view>
      </view>

      <!-- 已完成, -->
      <view v-if="result.orderStatus === 3 || result.orderStatus === 5" flex items-center my-20rpx>
        <image w-40rpx h-40rpx mr-20rpx src="@/pages/ticket/static/check.png"></image>
        <view text-36rpx font-bold text="#000">{{ orderStatus[result.orderStatus] }}</view>
      </view>

      <!-- 已取消, 已退款, 拒绝退款 -->
      <view v-if="result.orderStatus === 4 || result.orderStatus === 7" flex items-center my-20rpx>
        <image w-40rpx h-40rpx mr-20rpx src="@/pages/ticket/static/cancel.png"></image>
        <view text-36rpx font-bold text="#000">{{ orderStatus[result.orderStatus] }}</view>
      </view>
      <view
        v-if="result.orderStatus === 0"
        text="#D03939"
        text-48rpx
        font-bold
        mb-20rpx
        style="--nut-countdown-font-size: 48rpx">
        <nut-countdown :endTime="endTime"></nut-countdown>
      </view>
      <view v-if="result.orderStatus === 0" text="#7D7D7D" font-bold text-20rpx>
        请在规定时间内支付，超过支付时间将自动取消订单。
      </view>
      <view
        v-if="result.orderStatus === 2"
        font-bold
        text-24rpx
        text="#D03939"
        flex
        items-center
        style="--nut-countdown-font-size: 24rpx">
        <nut-countdown :endTime="endTime" format="DD 天 HH 时 mm 分 ss 秒"></nut-countdown>
        后，自动完成收货。
      </view>
    </view>
    <view class="item" w-710rpx box-border pa-20rpx mb-10rpx rounded-20rpx bg="#fff" text="#000">
      <view w-full box-border flex items-center mt->
        <image mode="aspectFill" w-180rpx h-180rpx rounded-20rpx mr-30rpx shrink-0 :src="result.goodsImg"></image>
        <view w-full h-180rpx flex flex-col justify-between>
          <view flex justify-between>
            <view line-clamp-1 break-all text-32rpx font-bold>
              {{ result.goodsName }}
            </view>
            <view text-28rpx text="#999999">x{{ result.payNum }}</view>
          </view>

          <view mt-22rpx flex overflow-x-auto w-400rpx style="white-space: nowrap">
            <view
              h-40rpx
              px-20rpx
              box-border
              rounded-20rpx
              bg="#FCC300"
              text="#000"
              text-20rpx
              flex
              justify-center
              items-center
              mr-20rpx
              shrink-0>
              {{ result.goodsType == 1 ? '电子票' : '智能卡' }}
            </view>
            <view
              v-if="result.labelName1"
              h-40rpx
              px-10rpx
              box-border
              rounded-20rpx
              bg="#EEEEEE"
              text="#484848"
              text-20rpx
              flex
              justify-center
              items-center
              mr-20rpx
              shrink-0>
              {{ result.labelName1 }}
            </view>
            <view
              v-if="result.labelName2"
              h-40rpx
              px-10rpx
              box-border
              rounded-20rpx
              bg="#EEEEEE"
              text="#484848"
              text-20rpx
              flex
              justify-center
              items-center
              mr-20rpx
              shrink-0>
              {{ result.labelName2 }}
            </view>
            <view
              v-if="result.labelName3"
              h-40rpx
              px-10rpx
              box-border
              rounded-20rpx
              bg="#EEEEEE"
              text="#484848"
              text-20rpx
              flex
              justify-center
              items-center
              mr-20rpx
              shrink-0>
              {{ result.labelName3 }}
            </view>
          </view>
          <view w-full mt-10rpx flex justify-end items-center>
            <view mr-20rpx text-24rpx>应付款</view>
            <view flex items-end font-bold>
              <view mb-6rpx text-20rpx mr-4rpx>¥</view>
              <view text-36rpx>{{ result.totalActualAmount }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view
      v-if="result.ticketNo && result.ticketNo.length > 0"
      w-full
      bg="#fff"
      rounded-20rpx
      box-border
      px-20rpx
      mb-10rpx
      flex>
      <view w-full py-20rpx flex items-center justify-between text="#000">
        <view text-28rpx font-500>电子票号</view>
        <view>
          <view v-for="ticketNo in result.ticketNo" flex items-center justify-end py-16rpx>
            <view text-28rpx text="#7D7D7D" mr-20rpx>{{ ticketNo }}</view>
            <image w-40rpx h-40rpx src="@/pages/ticket/static/copy.png" @click="setCopyTicketNo(ticketNo)"></image>
          </view>
        </view>
      </view>
    </view>
    <view
      v-if="result.memberNumber && result.memberNumber.length > 0"
      w-full
      bg="#fff"
      rounded-20rpx
      box-border
      px-20rpx
      mb-10rpx
      flex>
      <view w-full py-20rpx flex items-center justify-between text="#000">
        <view text-28rpx font-500>智能卡号</view>
        <view>
          <view v-for="memberNumber in result.memberNumber" flex items-center justify-end py-16rpx>
            <view text-28rpx text="#7D7D7D" mr-20rpx>{{ memberNumber }}</view>
            <image w-40rpx h-40rpx src="@/pages/ticket/static/copy.png" @click="setCopyMembero(memberNumber)"></image>
          </view>
        </view>
      </view>
    </view>
    <view w-full bg="#fff" rounded-20rpx box-border px-20rpx mb-10rpx>
      <view w-full h-90rpx flex items-center justify-between text="#000" style="border-bottom: 1px solid #eeeeee">
        <view text-28rpx font-500>订单编号</view>
        <view flex items-end>
          <view text-28rpx text="#7D7D7D" mr-20rpx>{{ result.orderNo }}</view>
          <image w-40rpx h-40rpx src="@/pages/ticket/static/copy.png" @click="setCopy(result.orderNo)"></image>
        </view>
      </view>
      <view v-if="orderRefundId" w-full h-90rpx flex items-center justify-between text="#000" style="border-bottom: 1px solid #eeeeee">
        <view text-28rpx font-500>售后单号</view>
        <view flex items-end>
          <view text-28rpx text="#7D7D7D" mr-20rpx>{{ result.refundOrderNo }}</view>
          <image w-40rpx h-40rpx src="@/pages/ticket/static/copy.png" @click="setCopy(result.refundOrderNo)"></image>
        </view>
      </view>
      <view w-full h-90rpx flex items-center justify-between text="#000" style="border-bottom: 1px solid #eeeeee">
        <view text-28rpx font-500>下单时间</view>
        <view text-28rpx text="#7D7D7D">{{ result.createTime }}</view>
      </view>
      <view
        v-if="result.paymentTime"
        w-full
        h-90rpx
        flex
        items-center
        justify-between
        text="#000"
        style="border-bottom: 1px solid #eeeeee">
        <view text-28rpx font-500>支付时间</view>
        <view text-28rpx text="#7D7D7D">{{ result.paymentTime }}</view>
      </view>
      <view
        v-if="result.refundStatus == 3 && result.aggreRefundTime"
        w-full
        h-90rpx
        flex
        items-center
        justify-between
        text="#000"
        style="border-bottom: 1px solid #eeeeee">
        <view text-28rpx font-500>拒绝时间</view>
        <view text-28rpx text="#7D7D7D">{{ result.aggreRefundTime }}</view>
      </view>
      <view
        v-if="result.refundStatus == 3 && result.aggreRefundTime"
        w-full
        h-90rpx
        flex
        items-center
        justify-between
        text="#000"
        style="border-bottom: 1px solid #eeeeee">
        <view text-28rpx flex-shrink-0 mr-30rpx font-500>拒绝原因</view>
        <view text-28rpx  text="#7D7D7D">{{ result.dealRemark }}</view>
      </view>
      <view
        v-if="result.refundStatus == 4 && result.completeTime"
        w-full
        h-90rpx
        flex
        items-center
        justify-between
        text="#000"
        style="border-bottom: 1px solid #eeeeee">
        <view text-28rpx font-500>退款时间</view>
        <view text-28rpx text="#7D7D7D">{{ result.completeTime }}</view>
      </view>
      <view w-full h-110rpx flex items-center justify-between text="#000" style="border-bottom: 1px solid #eeeeee" :class="{ 'border-none': !result.realRefundAmount }">
        <view text-28rpx font-500>{{ result.paymentTime ? '实付' : '应付' }}金额</view>
        <view flex items-end text="#D03939" font-bold>
          <view mb-6rpx text-20rpx>¥</view>
          <view text-36rpx>{{ result.totalActualAmount }}</view>
        </view>
      </view>
      <view v-if="result.realRefundAmount" w-full h-110rpx flex items-center justify-between text="#000">
        <view text-28rpx font-500>实际退款金额</view>
        <view flex items-end text="#D03939" font-bold>
          <view mb-6rpx text-20rpx>¥</view>
          <view text-36rpx>{{ result.realRefundAmount }}</view>
        </view>
      </view>
    </view>
    <view v-if="result.paymentTime" w-full bg="#fff" rounded-20rpx box-border px-20rpx mb-10rpx flex>
      <view w-full h-110rpx flex items-center justify-between text="#000">
        <view text-28rpx font-500>支付方式</view>
        <view flex items-end>
          <view text-28rpx text="#7D7D7D" mr-20rpx>微信支付</view>
          <image w-40rpx h-40rpx src="@/pages/ticket/static/wechat.png"></image>
        </view>
      </view>
    </view>
  </view>
  <view
    v-if="result.orderStatus != 4 && result.orderStatus != 5 && result.orderStatus != 6 && result.orderStatus != 7"
    class="safe-bottom"
    position-fixed
    bottom-0
    w-full
    bg="#fff"
    z-999>
    <view w-full box-border px-40rpx py-40rpx flex justify-end items-center>
      <template v-if="result.orderStatus === 0">
        <cancel-order :orderId="result.orderId" @refresh="init">
          <view
            w-220rpx
            h-80rpx
            rounded-40rpx
            ml-20rpx
            flex
            justify-center
            items-center
            text="#000"
            text-32rpx
            bg="#D9D9D9">
            取消订单
          </view>
        </cancel-order>
      </template>

      <template v-if="result.orderStatus === 0">
        <order-pay :orderId="result.orderId" @refresh="init">
          <view
            w-220rpx
            h-80rpx
            rounded-40rpx
            ml-20rpx
            flex
            justify-center
            items-center
            text="#000"
            text-32rpx
            bg="#FCC300">
            立即支付
          </view>
        </order-pay>
      </template>
      <template v-if="result.orderStatus === 1 || result.orderStatus === 2 || result.orderStatus === 3">
        <order-refund :orderId="result.orderId" @refresh="init">
          <view
            w-220rpx
            h-80rpx
            rounded-40rpx
            ml-20rpx
            flex
            justify-center
            items-center
            text="#000"
            text-32rpx
            bg="#D9D9D9">
            申请退款
          </view>
        </order-refund>
      </template>
      <template v-if="result.orderStatus === 2">
        <confirm-order :orderId="result.orderId" @refresh="init">
          <view
            w-220rpx
            h-80rpx
            rounded-40rpx
            ml-20rpx
            flex
            justify-center
            items-center
            text="#000"
            text-32rpx
            bg="#FCC300">
            确认收货
          </view>
        </confirm-order>
      </template>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getMyTicketGoodsOrderDetail, selectMyTicketGoodsRefundOrderDetail } from '@/api/ticketGoods'
import cancelOrder from './components/cancelOrder.vue'
import orderPay from './components/orderPay.vue'
import orderRefund from './components/orderRefund.vue'
import confirmOrder from './components/confirmOrder.vue'
import { onLoad } from '@dcloudio/uni-app'
import { setCopy } from '@/utils/tools'

const result = ref<any>({})


const orderStatus = ref<any>({
  0: '待支付',
  1: '待交付',
  2: '已交付',
  3: '已完成',
  4: '已取消',
  5: '已退款',
  6: '退款中',
  7: '拒绝退款'
})

const refundStatus = ref<any>({
  1: '退款中',
  2: '退款中',
  3: '拒绝退款',
  4: '已退款'
})

const orderId = ref('')
const orderRefundId = ref('')
const endTime = ref<any>()
function countdownEnd() {
  console.log('倒计时结束')
  result.value.orderStatus = 4
}
function init() {
  if (orderRefundId.value) {
    selectMyTicketGoodsRefundOrderDetail(orderRefundId.value).then((res: any) => {
      result.value = res.data.result
    })
    return
  }
  getMyTicketGoodsOrderDetail(orderId.value).then((res: any) => {
    result.value = res.data.result
    if (result.value.orderStatus == 0) {
      const date = new Date(result.value.createTime.replace(' ', 'T'))

      endTime.value = date.setMinutes(date.getMinutes() + 30)
    } else if (result.value.orderStatus == 2) {
      // 交付之后
      endTime.value = new Date(result.value.autoDeliveryTime.replace(' ', 'T'))
    }
  })
}

function setCopyTicketNo(ticketNo: string | number) {
  setCopy(ticketNo)
  // uni.navigateTo({
  //   url: '/pages/ticket/bindTicket?ticketCardType=1'
  // })
}

function setCopyMembero(ticketNo: string | number) {
  setCopy(ticketNo)
  // uni.navigateTo({
  //   url: '/pages/ticket/bindTicket?ticketCardType=2'
  // })
}

onMounted(() => {})
onLoad((options: any) => {
  if (options.orderId) {
    orderId.value = options.orderId
  }
  if (options.orderRefundId) {
    orderRefundId.value = options.orderRefundId
    uni.setNavigationBarTitle({
      title: '售后订单详情'
    })
  }
  
  init()
})
</script>
<style>
page {
}
</style>
<style scoped lang="scss"></style>
